<template>
	<view class="repair">
		<view class="repair-input">
			<view class="fulNew">
				<view class="fulNew_left"> 物流类型 </view>
				<view class="fulNew_right" style="width: 500rpx">
					<radio-group @change="typeChange">
						<label v-for="item in typeList" :key="item.value" style="margin-right: 20rpx">
							<radio :value="item.value" :checked="item.value == editForm.express_type" />
							{{ item.label }}
						</label>
					</radio-group>
				</view>
			</view>
			<view class="fulNew">
				<view class="fulNew_left"> 结算类型 </view>
				<view class="fulNew_right" style="width: 500rpx">
					<radio-group @change="sumChange">
						<label v-for="item in sumList" :key="item.value" style="margin-right: 20rpx">
							<radio :value="item.value" :checked="item.value == editForm.pay_type" />
							{{ item.label }}
						</label>
					</radio-group>
				</view>
			</view>
			<view class="fulNew">
				<view class="fulNew_left"> {{ express }}人 </view>
				<view class="fulNew_right" style="width: 500rpx">
					<input type="text" v-model="editForm.name" :placeholder="`请输入${express}人`" />
				</view>
			</view>
			<view class="fulNew">
				<view class="fulNew_left"> {{ express }}地址 </view>
				<view class="fulNew_right" style="width: 500rpx">
					<input type="text" v-model="editForm.address" :placeholder="`请输入${express}地址`" />
				</view>
			</view>
			<view class="fulNew">
				<view class="fulNew_left"> {{ express }}电话 </view>
				<view class="fulNew_right" style="width: 500rpx">
					<input type="text" v-model="editForm.mobile" maxlength="11" :placeholder="`请输入${express}电话`" />
				</view>
			</view>
			<view class="fulNew">
				<view class="fulNew_left">设备品牌 </view>
				<view class="fulNew_right" style="width: 500rpx">
					<input type="text" v-model="editForm.equipment_name" placeholder="请输入设备品牌" />
				</view>
			</view>
			<view class="fulNew">
				<view class="fulNew_left"> 设备型号 </view>
				<view class="fulNew_right" style="width: 500rpx">
					<input type="text" v-model="editForm.equipment_model" placeholder="请输入设备型号" />
				</view>
			</view>
			<view class="fulNew">
				<view class="fulNew_left">设备序列号 </view>
				<view class="fulNew_right" style="width: 500rpx">
					<input type="text" v-model="editForm.equipment_number" placeholder="请输入设备序列号" />
				</view>
			</view>
			<view class="fulNew">
				<view class="fulNew_left">运费 </view>
				<view class="fulNew_right" style="width: 500rpx">
					<input type="digit" v-model="editForm.money" placeholder="请输入物流费" @input="checkAmount"/>
				</view>
			</view>
			<view class="fulNew">
				<view class="fulNew_left">附件 </view>
				<view class="fulNew_right" style="width: 500rpx">
					<input type="text" v-model="editForm.attachment_file" placeholder="请输入附件" />
				</view>
			</view>
			<view class="fulNew">
				<view class="fulNew_left">销售订单 </view>
				<view class="fulNew_right" style="width: 500rpx" @click="getStartList">
					<xfl-select ref="xflRef" :list="workStartList" :clearable="false" :listShow="false"
						:isCanInput="true" :placeholder="'请选择销售记录ID'"
						style_Container="margin: 10px; width: -webkit-fill-available; padding: 10rpx;"
						:focusShowList="true" @change="startChange" @input="getStartList" />
				</view>
			</view>
			<view class="fulNew">
				<view class="fulNew_left">关联工单号 </view>
				<view class="fulNew_right" style="width: 500rpx" @click="getOrderList">
					<xfl-select ref="xflRef" :list="workOrderList" :clearable="false" :listShow="false"
						:isCanInput="true" :placeholder="'请选择关联工单号'"
						style_Container="margin: 10px; width: -webkit-fill-available; padding: 10rpx;"
						:focusShowList="true" @change="orderChange" @input="getOrderList" />
				</view>
			</view>
			<view class="fulNew">
				<view class="fulNew_left">快递单号 </view>
				<view class="fulNew_right"
					style="width:470rpx; display: flex;align-items: center; justify-content: space-between;">
					<input type="text" v-model="editForm.express_number" placeholder="请输入快递单号" />
					<image src="../../static/scode.png" mode="" class="scode" @click="toCode"></image>
				</view>
			</view>
		</view>
		<view class="repair-w">
			<view class="repair-w-n"> 备注 </view>
			<view class="repair-w-q">
				<textarea v-model="editForm.remark" placeholder-style="font-size:28rpx;line-height:34rpx;color:#B6BDBD;"
					style="height: 120rpx; width: 100%" placeholder="请输入备注" />
			</view>
		</view>
		<view class="repair-w">
			<view class="repair-w-n"> 物流照片 </view>
			<view class="repair-w-q">
				<view class="repair-w-q-i">
					<view class="repair-w-q-i-a" v-for="(item, index) in imgs_list" :key="index">
						<image :src="item" style="width: 100%; height: 100%; z-index: 99" @click="preImage(index)" />
						<image src="../../static/del.png" class="del" @tap="del_img(index)" />
					</view>
					<view class="repair-w-q-i-c" v-if="imgs_list.length < 3" @tap="upImgs">
						<image src="../../static/camera.png" class="img" />
					</view>
				</view>
				<view class="repair-w-q-p"> 支持上传3张jpg/png </view>
			</view>
		</view>
		<view class="submit" @tap="handleSumbit"> 提交 </view>
	</view>
</template>

<script>
	import xflSelect from "@/components/xfl-select/xfl-select.vue";
	import baseUrl from "@/request/baseUrl.js";
	export default {
		components: {
			xflSelect, //注册为子组件
		},
		data() {
			return {
				editForm: {
					express_type: "寄件",
					pay_type:0,
					name: "",
					address: "",
					mobile: "",
					equipment_name: "",
					equipment_model: "",
					equipment_number: "",
					attachment_file: "",
					express_number: "",
					newcustomer_id: '',
					remark: "",
					work_order_number: "",
					express_images: "",
				},
				imgs_list: [], // 物流照片列表
				typeList: [{
						value: "寄件",
						label: "寄件"
					},
					{
						value: "收件",
						label: "收件"
					},
				],
				sumList: [{
						value: "1",
						label: "月结"
					},
					{
						value: "2",
						label: "个人垫付"
					},
				],
				workOrderList: [], // 关联工单列表
				workStartList: []
			};
		},
		computed: {
			express() {
				return this.editForm.express_type == "寄件" ? "收件" : "寄件";
			},
		},
		methods: {
			// 小数点后2位
			checkAmount(e){
				e = (e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.editForm.money = e
				})
			},
			getStartList(e) {
				console.log(e,'getNewcustomerId')
				this.$https
					.post("/logistics/getNewcustomerId", {
						newcustomer_id: e.detail.value?e.detail.value:''
					})
					.then((res) => {
						this.workStartList = res.data;
					});
			},
			getOrderList(e) {
				console.log(e,'getWorkOrderNumber')
				this.$https
					.post("/logistics/getWorkOrderNumber", {
						work_id: e.detail.value?e.detail.value:''
					})
					.then((res) => {
						this.workOrderList = res.data;
					});
			},
			// 切换类型
			typeChange(e) {
				this.editForm.express_type = e.detail.value;
			},
			sumChange(e) {
				this.editForm.pay_type = e.detail.value;
			},
			startChange(e) {
				this.editForm.newcustomer_id = e.newVal;
			},
			// 选择关联工单
			orderChange(e) {
				this.editForm.work_order_number = e.newVal;
			},
			toCode() {
				let that = this
				uni.scanCode({
					scanType: ['barCode'],
					success: function(res) {
						console.log('express_number：' + res.result);
						that.editForm.express_number = res.result
					}
				});
			},
			/* 删除照片 */
			del_img(i) {
				this.imgs_list.splice(i, 1);
			},
			/* 图片预览 */
			preImage(current) {
				uni.previewImage({
					current,
					urls: this.imgs_list,
				});
			},
			/* 图片上传 */
			upImgs() {
				const token = uni.getStorageSync("userInfo").token;
				uni.chooseImage({
					count: 3 - this.imgs_list.length,
					sourceType: ["album", "camera"], // album 从相册选图，camera 使用相机，默认二者都有
					success: (res) => {
						res.tempFilePaths.forEach((item) => {
							uni.uploadFile({
								url: `${baseUrl}api/common/upload`,
								filePath: item,
								name: "file",
								formData: {
									token: token, // 上传附带参数
								},
								success: (res1) => {
									if (res1.data.code == 0) {
										uni.showToast({
											title: res1.data.msg,
											icon: "error",
										});
									} else {
										let img = JSON.parse(res1.data).data.fullurl;
										this.imgs_list.push(img);
									}
								},
								fail: () => {
									uni.showToast({
										title: "上传失败",
										icon: "error",
									});
								},
							});
						});
					},
					fail: () => {
						uni.showToast({
							title: "上传失败",
							icon: "error",
						});
					},
				});
			},
			isMobile(mobile) {
				return /^1[3-9]\d{9}$/.test(mobile);
			},
			/* 提交 */
			handleSumbit() {
				console.log(this.editForm,'this.editForm')
				if (!this.editForm.name) {
					uni.showToast({
						icon: "none",
						title: `请输入${this.editForm.express_type}人`,
					});
					return;
				}
				if (!this.editForm.address) {
					uni.showToast({
						icon: "none",
						title: `请输入${this.editForm.express_type}地址`,
					});
					return;
				}
				if (!this.isMobile(this.editForm.mobile)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的电话号码",
					});
					this.editForm.mobile = "";
					return;
				}
				if (!this.editForm.equipment_name) {
					uni.showToast({
						icon: "none",
						title: "请输入设备品牌",
					});
					return;
				}
				if (!this.editForm.equipment_model) {
					uni.showToast({
						icon: "none",
						title: "请输入设备型号",
					});
					return;
				}
				if (!this.editForm.equipment_number) {
					uni.showToast({
						icon: "none",
						title: "请输入设备序列号",
					});
					return;
				}
				if (!this.editForm.express_number) {
					uni.showToast({
						icon: "none",
						title: "请输入快递单号",
					});
					return;
				}
				if (this.imgs_list.length == 0) {
					uni.showToast({
						icon: "none",
						title: "请上传物流照片",
					});
					return;
				}
				this.editForm.express_images = this.imgs_list.toString();
				this.$https.post("/logistics/add", this.editForm).then((res) => {
					uni.showToast({
						title: "提交成功",
						icon: "none",
						duration: 1500,
						success: () => {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
								});
							}, 1500);
						},
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.fulNew {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		line-height: 100rpx;
		color: #3b3d3d;
		font-weight: 500;
		border-bottom: 2rpx solid #f6f7fb;
		background-color: #fff;
		font-size: 28rpx;

		.scode {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.del {
		position: absolute;
		width: 32rpx;
		height: 32rpx;
		top: 0rpx;
		right: 0rpx;
		border-radius: 50% !important;
		background-color: #ffffff;
		z-index: 99999;
	}

	.submit {
		width: 622rpx;
		height: 80rpx;
		border-radius: 80rpx;
		background-color: $public-oclor;
		line-height: 80rpx;
		text-align: center;
		color: #ffffff;
		margin: 30rpx auto;
	}

	.repair-input {
		padding: 20rpx 32rpx;
		background-color: #f6f7fb;
		position: relative;
		background-color: #fff;

		input {
			padding: 0 60rpx 0 50rpx;
			height: 88rpx;
			border-radius: 88rpx;
			background-color: #ffffff;
		}
	}

	.repair {
		&-w {
			border-bottom: 20rpx solid #f6f7fb;

			&-q {
				padding: 30rpx 32rpx;

				&-p {
					font-size: 28rpx;
					color: #b6bdbd;
					line-height: 33rpx;
					margin-top: 40rpx;
				}

				&-i {
					display: flex;

					&-a {
						width: 160rpx;
						height: 160rpx;
						background: #f5f6f8;
						margin-right: 20rpx;
						border-radius: 4rpx;
						position: relative;

						image {
							border-radius: 4rpx;
						}
					}

					&-b {
						width: 160rpx;
						height: 160rpx;
						background: #f5f6f8;
						margin: 0 16rpx;
					}

					&-c {
						width: 160rpx;
						height: 160rpx;
						background: #f5f6f8;
						position: relative;

						.img {
							width: 60rpx;
							height: 60rpx;
							position: absolute;
							left: 50%;
							top: 50%;
							margin-top: -30rpx;
							margin-left: -30rpx;
						}
					}
				}

				&-t {
					border-bottom: 2rpx solid #f6f7fb;

					textarea {
						width: 100%;
					}
				}
			}

			&-n {
				padding: 20rpx 32rpx;
				background: linear-gradient(91deg, #e2ecfb 0%, rgba(255, 255, 255, 0) 100%);
				font-size: 28rpx;
				font-weight: 600;
				color: #6aa6fa;
				line-height: 33rpx;
			}
		}

		&-m {
			border-bottom: 20rpx solid #f6f7fb;

			&-n {
				padding: 20rpx 32rpx;
				background: linear-gradient(86deg,
						rgba(226, 140, 129, 0.15) 0%,
						rgba(226, 140, 129, 0) 100%);
				font-size: 28rpx;
				font-weight: 600;
				color: #e98d78;
				line-height: 33rpx;
			}

			&-f {
				margin: 0 25rpx;
				padding: 32rpx 0;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #f6f7fb;
				align-items: center;

				&-n {
					font-size: 28rpx;
					font-weight: 500;
					color: #3b3d3d;
					line-height: 33rpx;
				}

				&-i {
					font-size: 28rpx;
					font-weight: 500;
					color: #3b3d3d;
					line-height: 33rpx;
				}
			}
		}
	}
</style>